<template>
	<page-container :isback="true" :base-tab="1" :shownav="true" navtitle="监督随手拍" :istabbox="false">
		<view class="content-root content">
			<view class="root-container form-root">
				<view class="form-container" style="padding: 20rpx;">
					<u-form labelWidth="120" labelPosition="top" :model="formData" :rules="rules"
						ref="hagdonGatherForm">
						<u-form-item :required="true" label="反馈标题" borderBottom prop="suggestTitle">
							<u-input placeholder="请输入反馈标题" v-model="formData.suggestTitle" />
						</u-form-item>
						<u-form-item :required="true" label="反馈描述" borderBottom prop="suggestContent">
							<u-textarea maxlength="-1" v-model="formData.suggestContent"
								placeholder="请输入反馈描述"></u-textarea>
						</u-form-item>
						<u-form-item label="添加图片" borderBottom prop="img">
							<upload-img @submit="setImg"></upload-img>
						</u-form-item>
						<u-form-item label="添加视频" borderBottom prop="img">
							<upload-img accept="video" @submit="setVideo"></upload-img>
						</u-form-item>
						<u-form-item label="推荐办理单位" @click="openMinorRepresentative" borderBottom prop="unitName">
							<u-input disabledColor="#ffffff" disabled placeholder="请选择推荐办理单位"
								v-model="formData.minorRepresentativeNames">
							</u-input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
					</u-form>

				</view>
				<view class="button-container">
					<u-button class="submit-style button" text="提 交" @click="submit"></u-button>
				</view>

				<u-picker :show="unitOpen" :columns="[unitList]" keyName="name" title="请选建议分类"
					@confirm="unitSelect"></u-picker>


				<bottom-popup @cancel="closeMinorRepresentative" @submit="minorRepresentativeSelect" title="办理单位"
					:open="unitOpen" @close="closeMinorRepresentative">
					<choose-depart ref="chooseMainRepresentativeRef" :multiple="false"></choose-depart>
				</bottom-popup>

				<u-loading-page :loading="loading"></u-loading-page>
			</view>
		</view>
	</page-container>
</template>

<script>
	import uploadImg from '@/components/uploadImg.vue'
	import bottomPopup from "@/components/bottomPopup.vue";
	import chooseDepart from "@/components/chooseDepart.vue";
	import {
		baseMixins
	} from "@/util/baseMixins";
	import {
		baseFilePath,
		successPagePath
	} from "@/util/publicConfig";
	import {
		getCurrentLocation
	} from "@/util/locationUtil";

	export default {
		mixins: [baseMixins],
		components: {
			uploadImg,
			bottomPopup,
			chooseDepart
		},
		data() {
			return {
				loading: false,
				formData: {
					// 	建议标题
					suggestTitle: "",
					// 	建议内容
					suggestContent: "",
					// 	建议附件
					suggestImageFileArr: [],
					// 	建议附件
					suggestVideoFileArr: [],
					unit: '',
					unitName: '',
				},
				rules: {
					suggestTitle: {
						required: true,
						message: '请输入建议标题',
						trigger: ['blur', 'change']
					},
					suggestContent: {
						required: true,
						message: '请输入建议内容',
						trigger: ['blur', 'change']
					},
				},
				unitOpen: false,
				unitList: [],
				_mapContext: null
			}
		},
		methods: {
			initUnitList() {
				this.unitList = [{
					value: '1',
					name: '保合少联络站'
				}]
			},
			openUnit() {
				this.unitOpen = true
			},
			unitSelect(select) {
				this.formData.unitName = select.value[0].name;
				this.formData.unit = select.value[0].value
				this.$refs.hagdonGatherForm.validateField('unitName')
				this.unitOpen = false
			},

			openMinorRepresentative() {
				this.unitOpen = true
			},
			closeMinorRepresentative() {
				this.unitOpen = false
			},
			minorRepresentativeSelect() {
				this.formData.minorRepresentatives = this.$refs.chooseMainRepresentativeRef.getCheckedData()
				if (!Array.isArray(this.formData.minorRepresentatives) || this.formData.minorRepresentatives.length <= 0)
					return
				this.formData.minorRepresentativeNames = this.formData.minorRepresentatives.map(item => item
					.departName).join()
				this.$refs.hagdonGatherForm.validateField('minorRepresentativeNames')
				this.unitOpen = false
			},

			setImg(img) {
				this.formData.suggestImageFileArr = img.map(item => item.url)
			},
			setVideo(video) {
				this.formData.suggestVideoFileArr = video.map(item => item.url)
			},
			setLocation() {
				getCurrentLocation().then(res => {
					console.log('location'.repeat(20))
					console.log(res)
				})
			},
			submit() {
				this.loading = true;
				let owner = this
				this.$refs.hagdonGatherForm.validate().then(res => {

					uni.$u.toast('添加成功');
					owner.loading = false
					owner.redirectToPage(successPagePath)

					// requestPost({url: SUBMIT_SUGGEST, data: owner.formData, header: getQueryHeaders()}).then(res => {
					//   uni.$u.toast('添加成功');
					//   owner.redirectToPage(successPagePath)
					// }).finally(() => {
					//   owner.loading = false
					// })
				}).catch(errors => {
					owner.loading = false
					uni.$u.toast('校验失败')
				})
			},
		},
		async created() {
			this.initUnitList()
			this.setLocation()
		},
	}
</script>

<style lang="scss" scoped>
	.map-container {
		width: 100%;
		height: 400rpx;
		margin-top: 20rpx;
		box-sizing: border-box;
		padding: 0 20rpx;
	}

	.diy-item {
		::v-deep .u-form-item__body {
			padding-top: 0;
		}
	}

	::v-deep .u-radio {
		margin-right: 30rpx;
	}

	.content-root {
		overflow: auto;
		height: 100%;
	}

	::v-deep .u-textarea {
		height: 500rpx
	}

	::v-deep .uni-textarea-wrapper {
		height: 500rpx
	}
</style>